<script  lang="ts" setup >
import { reactive } from 'vue';

interface Person {
    name:string,
    gender:string
    age:number
}

let person = reactive<Person>({
    name:"abcque",
    gender:"M",
    age:20,
})

</script>

<template>
    <ul>
        <li v-for="value in person">{{ value }}</li>
    </ul>

    <ul>
        <li v-for="(value, key) in person">{{ key}} : {{ value }}</li>
    </ul>

    <ul>
        <li v-for="(value, key, index) in person">{{ index }} {{ key}} : {{ value }}</li>
    </ul>
</template>

<style lang="css" scoped>
</style>